<template>
  <div class="container-header head-form" slot="header">
    <Form class="search">
      <Row>
        <Col span="5">
          <FormItem label="部门选择">
            <Cascader 
              :data="departmentTree"
              :change-on-select='true'
              v-model="value"
              @on-change="onSelectDpt"
              placeholder="请选择地区"
            ></Cascader>
          </FormItem>
          <FormItem label="姓名">
            <Input
              class="start"
              v-model.trim="list.form.realname"
              placeholder="姓名"
              @on-enter="onSearchBtnClick"
            />
          </FormItem>
        </Col>
        <Col span="5">
          <FormItem label="经销商选择">
            <!-- <DistributorSelect v-model="list.form.distributorId" /> -->
              <SelectList v-model='list.form.distributorId' ref="dealerList" listType='dealerList' />
          </FormItem>
          <FormItem label="审核状态">
            <Select v-model="list.form.auditStatus" clearable>
              <Option :value="0">待审核</Option>
              <Option :value="1">审核不通过</Option>
              <Option :value="2">审核通过</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="5">
          <FormItem label="是否签约">
            <Select v-model="list.form.contractStatus" clearable>
              <Option :value="1">是</Option>
              <Option :value="0">否</Option>
            </Select>
          </FormItem>
          <FormItem label="职能类型">
            <Select v-model="list.form.roleId" clearable>
              <Option
                v-for="item in roleList"
                :value="item.id"
                :key="item.id"
              >{{item.roleName}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="5">
           <FormItem label="登录账号">
            <Input
              class="start"
              v-model.trim="list.form.mobile"
              placeholder="手机号码"
              @on-enter="onSearchBtnClick"
            />
          </FormItem>
        </Col>
        <Col class-name="search" span="2">
          <Button
            class="btn-search large"
            type="primary"
            icon="ios-search"
            @click="onSearchBtnClick"
          ></Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
  import AreaSelect from '@/components/AreaSelect';
  import SelectList from '@/components/SelectList';
  import DistributorSelect from '@/components/DistributorSelect'

  export default {
    props: {
      list: {
        type: Object,
        default: ''
      }
    },
    data() {
      return {
        currValue: [],
        useTypeList: [
          { text: '是', value: true },
          { text: '否', value: false },
        ],
        opts: [
          { value: 'a', text: '门店名称' },
          { value: 'b', text: '门头名称' },
          { value: 'c', text: '联系人手机' },
          { value: 'd', text: '联系人姓名' },
        ],
        value: [],
        departmentTree: [],
        roleList: []
      }
    },
    computed: {
    },
    components: {
      AreaSelect,
      SelectList,
      DistributorSelect
    },
    mounted() {
      this.getDptTree()
      this.getDptRoles()
      this.value = [this.list.form.officeId, this.list.form.depId]
    },
    methods: {
      getDptRoles() {
        this.$ajaxGet('/distributor_salesman/findRoles').then(res => {
          this.roleList = res
        })
      },
      onSearchBtnClick() {
        this.$emit('onSearchBtnClick')
      },
      onAddBtnClick() {
        this.$emit('onAddBtnClick')
      },
      getDptTree() {
        this.$jsonPost('department/listDepartmentTree').then(res => {
          const func = (arr) => {
            arr.forEach(item => {
              item.label = item.name
              item.value = item.id
              if(item.children && item.children.length) {
                func(item.children)
              }
            })
          }
          func(res)
          this.departmentTree = res
        })
      },
      onSelectDpt(val) {
        let [d, a] = val
        this.list.form.officeId = d
        this.list.form.depId = a
        // if (a) {
        //   delete this.list.form.officeId
        // }
        let id = val[val.length-1]
        if(!id) return
        let obj = {
          departId: id,
          current: 1,
          size: 9999,
          isPage: false
        }
        this.$refs.dealerList.getListDispath('getDealerListByDpt', obj)
      }
    },
    watch: {
    }
  }
</script>
